<template>
    <div id="devicePlm">
        <!-- 设备维修记录 -->
        <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane class="sel" label="基础信息" name="active_1">
                <div class="menu_content">
                    <div class="deviceimg">
                        <img :src="deviceInfo.imgurl" alt="" />
                    </div>
                    <div class="list">
                        <div class="item" v-for="item in nameplate" :key="item">
                            <span>{{ item.label }}</span>
                            <span>{{ item.value }}</span>
                        </div>
                    </div>
                    <div class="edit">
                        <i title="编辑" class="el-icon-edit-outline" @click="editShow = true"></i>
                        <i title="二维码" class="el-icon-full-screen" @click="code"></i>
                    </div>
                </div>
            </el-tab-pane>
            <!-- <el-tab-pane label="巡检记录" class="sel" name="active_4">
                <div class="menu_content">
                    <zy-table :tableData="pointData" :tableColumn="pointColumn" :pageSize="pointPagination.pageSize" :total="pointPagination.total" @changePage="changePage4" />
                </div>
            </el-tab-pane>  -->
            <!-- <el-tab-pane label="启停机记录" class="sel" name="active_5">
                <div class="menu_content">

                    <zy-table :tableData="ssrData" :tableColumn="ssrColumn" :pageSize="ssrPagination.pageSize" :total="ssrPagination.total" @changePage="changePage5" />
                </div>
            </el-tab-pane> -->
            <el-tab-pane label="健康度" class="sel" name="active_6">
                <div class="menu_content">
                    <i class="el-icon-s-data" style="color: aliceblue; font-size: 20px; cursor: pointer" title="图表展示" @click="showHel"></i>
                    <zy-table :tableData="hel_data" :tableColumn="hel_column" :pageSize="helPagination.pageSize" :total="helPagination.total" @changePage="changePage6" />
                </div>
            </el-tab-pane>
            <!-- <el-tab-pane label="劣化度" v-if="permissionIdList !== '0' && permissionIdList !== 0" class="sel" name="active_7">
                <div class="menu_content">
                    <table v-if="lh_data" style="color: #0cd9e8; font-size: 18px; margin: 20px">
                        <tr style="color: #b2e3ff; font-weight: 600">
                            <td style="height: 35px">劣化度指标</td>
                            <td style="padding-right: 30px">A相电流</td>
                            <td style="padding-right: 30px">B相电流</td>
                            <td style="padding-right: 30px">C相电流</td>
                        </tr>
                        <tr v-for="index in 14" :key="index">
                            <td style="padding-right: 30px; height: 30px">{{ lh_data.dataA[index][0] }}</td>
                            <td>{{ lh_data.dataA[index][2] }}</td>
                            <td>{{ lh_data.dataB[index][2] }}</td>
                            <td>{{ lh_data.dataC[index][2] }}</td>
                        </tr>
                    </table>
                </div>
            </el-tab-pane> -->
        </el-tabs>
        <el-dialog title="编辑设备基础信息" :visible.sync="editShow" width="50%">
            <div>
                <i class="el-icon-plus" style="font-size: 30px; color: aqua; position: absolute; cursor: pointer" v-if="nameplate.length == 0" @click="addRow"></i>
                <div v-for="(item, index) in nameplate" class="eidtItem" :key="index">
                    <el-input v-model="item.label" placeholder=""></el-input>
                    <el-input v-model="item.value" placeholder=""></el-input>
                    <i class="el-icon-plus" v-if="index == nameplate.length - 1" @click="addRow"></i>
                    <i class="el-icon-plus" v-if="nameplate.length == 0" @click="addRow"></i>
                    <i class="el-icon-minus" @click="deleteRow(index)"></i>
                </div>
                <div class="eidtItem"></div>
            </div>
            <div slot="footer">
                <el-button @click="editShow = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">保 存</el-button>
            </div>
        </el-dialog>
        <el-dialog :modal-append-to-body="true" :visible.sync="isShow" width="30%">
            <img style="height: 100%" v-if="url" :src="url" />
        </el-dialog>
        <health ref="health" />
    </div>
</template>

<script>
import { deviceNameplateEditApi, recordlistApi, requestApi } from '@/requset/api'
import tableData from '@/components/tableData'
import health from '@/components/health'
import zyTable from '@/components/common/zyTable.vue'
import { deepClone } from '@/plugins/clone'
import { ssr_column, point_column, hel_column } from './config.js'

import QRCode from 'qrcode'
export default {
    data() {
        return {
            editShow: false,
            activeName: 'active_1',
            nameplate: [
                {
                    label: '',
                    value: '',
                },
            ],
            hel_data: [],
            hel_column: {},
            helPagination: {},
            pointData: [],
            pointColumn: {},
            pointPagination: {},
            url: '',
            isShow: false,
            ssrData: [],
            ssrColumn: {},
            ssrPagination: {},
            lh_data: null,
            permissionIdList: 1,
        }
    },
    props: {
        deviceInfo: {
            type: Object,
            default: {},
        },
        date_time: {
            type: Array,
            default: [],
        },
    },
    components: { tableData, zyTable, health },
    methods: {
        code() {
            QRCode.toDataURL(`${this.deviceInfo.id};${this.deviceInfo.device_name}`, (err, url) => {
                if (err) {
                    console.error(err)
                } else {
                    this.url = url
                    this.isShow = true
                }
            })
        },
        handleClick(e) {},
        recordlist(id) {
            this.point_query.device_id = id
            recordlistApi(this.point_query).then((res) => {
                if (res.data.code != 0) return
                this.ssrData = res.data.data
                this.ssrPagination = res.data.pagination
            })
        },

        changePage5(e) {
            this.getSsr(e)
        },
        changePage4(e) {
            this.getPoint(e)
        },
        changePage6(e) {
            this.healthList(e)
        },
        deviceRepairlogListByDevice(id) {
            requestApi('post', 'device_repairlog/listByDevice', { device_id: id }, false).then((res) => {
                if (res.data.code != 0) return
                this.report_config.table_data = res.data.data
            })
        },
        addRow() {
            this.nameplate.push({
                label: '',
                value: '',
            })
        },
        deleteRow(i) {
            this.nameplate.splice(i, 1)
            if (i == 1) this.addRow()
        },
        deviceNameplateEdit(obj) {
            deviceNameplateEditApi(obj).then((res) => {
                if (res.data.code != 0) {
                    this.$message({
                        type: 'info',
                        message: '保存失败',
                    })
                    return
                } else {
                    this.$message({
                        type: 'success',
                        message: '保存成功',
                    })
                }
                this.editShow = false
                let id = this.deviceInfo.id
                this.deviceRepairlogListByDevice(id)
            })
        },
        getSsr(page) {
            let id = Number(this.$route.query.device_id)
            let obj = {
                device_id: id,
                page,
            }

            requestApi('post', 'device/getssr', obj, false).then((res) => {
                if (res.data.code != 0) return
                this.ssrData = res.data.data
                this.ssrPagination = res.data.pagination
            })
        },
        getPoint(page) {
            let id = Number(this.$route.query.device_id)
            let obj = {
                id,
                page,
            }

            requestApi('post', 'point/record/getlist', obj, false).then((res) => {
                if (res.data.code != 0) return
                this.pointData = res.data.data
                this.pointPagination = res.data.pagination
            })
        },
        healthList(page) {
            let id = Number(this.$route.query.device_id)
            let obj = {
                device_id: id,
                page,
                start_time: this.dayjs(this.date_time[0]).format('YYYY-MM-DD HH:mm:ss'),
                end_time: this.dayjs(this.date_time[1]).format('YYYY-MM-DD HH:mm:ss'),
            }
            requestApi('post', 'health/getlist', obj, false).then((res) => {
                if (res.data.code != 0) return
                this.hel_data = res.data.data
                this.helPagination = res.data.pagination
            })
        },
        submitForm() {
            this.deviceNameplateEdit({
                id: this.deviceInfo.id,
                nameplate: JSON.stringify(this.nameplate),
            })
        },
        showHel() {
            this.$refs.health.doOpen(this.hel_data)
        },
    },
    watch: {
        'deviceInfo.nameplate': {
            handler(newVal) {
                if (!newVal) {
                    this.nameplate = []
                    return
                }
                this.nameplate = deepClone(JSON.parse(newVal))
            },
        },
        date_time: {
            handler(newVal) {
                this.healthList(1)
            },
        },
    },
    mounted() {},
    created() {
        this.permissionIdList = sessionStorage.getItem('permissionIdList')
        if (this.deviceInfo.nameplate) {
            this.nameplate = deepClone(JSON.parse(this.deviceInfo.nameplate))
        }
        this.getSsr(1)
        this.getPoint(1)
        this.healthList(1)
        requestApi('post', 'health/liehua', { device_id: Number(this.$route.query.device_id) }, false).then((res) => {
            if (res.data.code !== 0 || res.data.data.length === 0) return
            res.data.data.dataA.map((item) => {
                item[2] = item[2].toFixed(2) + '%'
            })
            res.data.data.dataB.map((item) => {
                item[2] = item[2].toFixed(2) + '%'
            })
            res.data.data.dataC.map((item) => {
                item[2] = item[2].toFixed(2) + '%'
            })
            this.lh_data = res.data.data
        })
        this.ssrColumn = ssr_column
        this.pointColumn = point_column
        this.hel_column = hel_column
    },
}
</script>

<style lang="less" scoped>
#devicePlm {
    width: 100%;
    height: 100%;

    // background-color: aqua;
    .menu_content {
        height: calc(100vh - 230px);
        width: 100%;
        position: relative;

        .deviceimg {
            width: 100%;
            height: 100%;
            text-align: center;
            opacity: 0.2;
            position: absolute;
            left: 0;
            top: 0;

            img {
                height: 100%;
            }
        }

        .list {
            position: absolute;
            left: 20%;
            top: 15%;
            width: 60%;
            height: 80%;
            overflow: auto;

            .item {
                width: 100%;
                height: 36px;

                margin-bottom: 4px;
                line-height: 36px;

                span {
                    width: 50%;
                    height: 100%;
                    display: block;
                    float: left;
                    text-align: center;
                    font-weight: bold;
                }

                span:nth-child(1) {
                    color: #007bff;
                }

                span:nth-child(2) {
                    color: #0cd9e8;
                }
            }
        }

        .edit {
            font-size: 32px;
            color: #007bff;
            position: absolute;
            top: 0;
            right: 15%;
            cursor: pointer;
        }
    }
}
</style>
<style lang="less">
#devicePlm {
    .el-tabs__item {
        background-color: #0a3273;
        background-image: none !important;
        height: 36px;
        line-height: 36px;
        width: 100px;
        color: #007bff;
        font-size: 13px !important;
    }

    .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
        color: white !important;
        background-color: #007bff !important;
    }

    .eidtItem {
        width: 80%;
        margin-left: 10%;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        position: relative;

        .el-input {
            width: 40%;
        }

        i {
            font-size: 30px;
            color: aqua;
            position: absolute;

            cursor: pointer;
        }

        .el-icon-plus {
            right: -32px;
            top: 4px;
        }

        .el-icon-minus {
            left: -32px;
            top: 4px;
        }
    }
}
</style>
